<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <div ref="exportPdf" id="exportPdf" style="height:100vh">
        <router-view v-if="isRouterAlive"/>
      </div>
      <a-modal :visible="showPrintBox" title="页面转PDF或图片打印">
        <div>
          <a-button @click="saveAsPdf">下载为PDF</a-button>
          <a-button style="margin-left:20px" @click="printPdf">直接打印</a-button>
          <a-button style="margin-left:20px" @click="saveAsImg">下载为图片(单图片)</a-button>
        </div>
        <div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-form-model-item label="PDF或图片文件名:">
              <a-input v-model="form.fileName" />
            </a-form-model-item>
          </a-form-model>
        </div>
        <template slot="footer">
          <a-button type="primary" @click="showPrintBox = false">取消</a-button>
        </template>
      </a-modal>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import '@/components/iconfont/common.less'
export default {
  provide () {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      locale: zhCN,
      showPrintBox: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form:{},
      isRouterAlive: true
    }
  },
  created() {
    let that = this
    enquireScreen(deviceType => {
      // tablet
      if (deviceType === 0) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      }
      // mobile
      else if (deviceType === 1) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      } else {
        that.$store.commit('TOGGLE_DEVICE', 'desktop')
        that.$store.dispatch('setSidebar', true)
      }
    })
    this.keyDown()
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    keyDown() {
      let that = this
      document.onkeydown = function(e) {
        var keyCode = e.keyCode || e.which || e.charCode
        var ctrlKey = e.ctrlKey
        var altKey = e.altKey
        // console.info(
        //   'altKey=' +
        //     altKey +
        //     '   ctrlKey=' +
        //     ctrlKey +
        //     '   keyCode=' +
        //     keyCode +
        //     '   showPrintBox=' +
        //     that.showPrintBox
        // )
        if (altKey && ctrlKey && keyCode == 80 && !that.showPrintBox) {
          that.showPrintBox = true
          e.preventDefault()
        }
      }
    },
    saveAsPdf() {
      if(!this.form.fileName){
        this.$message.warning("请输入文件名")
        return
      }
      this.showPrintBox = false
      window.scrollTo(0, 0)
      this.htmlToPdf("exportPdf",this.form.fileName)
    },
    saveAsImg() {
      if(!this.form.fileName){
        this.$message.warning("请输入文件名")
        return
      }
      this.showPrintBox = false
      window.scrollTo(0, 0)
      this.htmlToImg("exportPdf",this.form.fileName)
    },
    printPdf(){
      this.showPrintBox = false
      window.scrollTo(0, 0)
      this.printHtml("exportPdf")
    }
  }
}
</script>
<style>
#app {
  height: 100%;
}
* {
  font-family: 'Noto Sans SC' !important;
}
</style>
